<template>
  <div class="the-list">
    <div class="panel-table" style="margin-bottom:16px;" v-for="(item,index) in blockList" :key="index">
      <div class="table-head">
        <span>{{item.name}}</span>
        <div  v-if="hasPermission(['operation:illegalWord'])">
          <el-button type="primary" :disabled="!word.allWord[item.key]?.length && word.isLoading" @click="wordFn.openPanel(item.key)">修改</el-button>
        </div>
      </div>
      <div class="illegal-word-box">
        <span class="item" v-for="(name,index2) in word.allWord[item.key]" :key="index2">{{name}}</span>
        <p class="isEmpty" v-if="!word.allWord[item.key]?.length">暂无数据</p>
      </div>
    </div>

    <el-dialog title="修改敏感词" v-model="word.showPanel" width="70%">
      <el-input v-model="word.postWord" type="textarea" :rows="20" placeholder="请填写敏感词"></el-input>
      <p class="isHint">* 敏感词之间以“，”（中文逗号）隔开。</p>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="wordFn.closePanel">取 消</el-button>
          <el-button type="primary" @click="wordFn.updateIllegalData">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { getIllegalWord, updateIllegalWord } from "@/api/operation.js";
import { ElMessage } from "element-plus";
const blockList = [
  { key: "politics", name: "政治类" },
  { key: "pornographic", name: "色情类" },
  { key: "advertisement", name: "广告类" },
  { key: "violence", name: "暴力类" },
];
const { $data: word, $fn: wordFn } = (() => {
  const $data = reactive({
    showPanel: false,
    postWord: "", //修改的敏感词
    postType: "", //当前修改的敏感词的分类:blockList的key
    allWord: (() => {
      let res = {};
      for (let prop of blockList) {
        res[prop.key] = [];
      }
      return res;
    })(),
    isLoading: true,
  });
  const $fn = {
    getIllegalData() {
      $data.isLoading = true;
      getIllegalWord().then((res) => {
        if (res.code === 0) {
          $data.allWord = (() => {
            let resdata = {};
            for (let prop of blockList) {
              resdata[prop.key] = res.data[prop.key] || [];
            }
            return resdata;
          })();
          $data.isLoading = false;
        }
      });
    },
    openPanel(key) {
      $data.postWord = $data.allWord[key].join("，");
      $data.postType = key;
      $data.showPanel = true;
    },
    closePanel() {
      $data.showPanel = false;
      $data.postType = "";
    },
    updateIllegalData() {
      let sensitiveWords = $fn.dealDataStr($data.postWord);
      updateIllegalWord({ sensitiveWords, type: $data.postType }).then(
        (res) => {
          if (res.code === 0) {
            ElMessage.success("修改成功！");
            $fn.getIllegalData();
            $fn.closePanel();
          }
        }
      );
    },
    dealDataStr(str) {
      // 1.去重，2.去空
      let list = str?.split("，") || [];
      let resSet = new Set();
      for (let i = 0; i < list.length; i++) {
        if (list[i] !== "") {
          resSet.add(list[i]);
        }
      }
      return [...resSet];
    },
  };
  $fn.getIllegalData();
  return {
    $data,
    $fn,
  };
})();
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
.illegal-word-box {
  max-height: 360px;
  overflow: scroll;
}
.item {
  padding: 4px 8px;
  margin: 4px;
  border-radius: 4px;
  background-color: rgb(235, 235, 235);
  color: rgb(58, 58, 58);
  font-size: 14px;
  display: inline-block;
}
.isHint {
  padding: 8px 0;
}
</style>